<script>
export default {
  components: {},
  props: {
    title: {
      value: String,
      default: '',
    },
    items: {
      value: Object,
      default: '',
    },
  },
  methods: {
    jump(i){
      if(i==this.items.length-1){
        return;
      }
      this.$router.push(this.items[i].url)
    }
  }
}
</script>

<template>
  <!-- start page title -->
  <div class="row">
    <div class="col-12">
      <div class="page-title-box">
        <h4 class="mb-0 newstyle">
          <div class="breadcrumb-item" v-for="(item,index) in items" :key="index">
            <span @click="jump(index)">{{item.text}}</span>
          </div>
        </h4>

        <!-- <div class="page-title-right">
          <b-breadcrumb :items="items" class="m-0"></b-breadcrumb>
        </div> -->
        
      </div>
    </div>
  </div>
  <!-- end page title -->
</template>
<style lang="scss" scoped>
.newstyle{
  display: flex;
  .breadcrumb-item{
    span{
      cursor: pointer;
    }
  }
  .breadcrumb-item:last-child{
    span{
      cursor: default;
    }
  }
}
</style>
